<template>
    <div class="b-mine">
        <div class="userlog">
            <img src="../assets/mine.png"/>
            <p v-if="user.isLogin===false" @click="loginMine">立即登录</p>
             <p v-else >{{user.username}}</p>
             <p>会员等级：新用户</p>
             <p>累计消费：0</p>
             <p>完善信息奖励500积分</p>
        </div>
        <div class="b-list">
           <ul class="b-list1">
               <li class="b-list2" >
                   <span class="b-list3">{{tatal}}</span>
                   <span>代付款</span>
               </li>
                <li class="b-list2">
                   <span class="b-list3">0</span>
                   <span>待发货</span>
               </li>
                <li class="b-list2">
                   <span class="b-list3">0</span>
                   <span>待收货</span>
               </li>
                <li class="b-list2">
                   <span class="b-list3">0</span>
                   <span>待评论</span>
               </li>
           </ul>
        </div>
        
        <mt-cell 
         v-for="todos of item" 
         :key="todos.id" 
         :title="todos.title"
         class="cell"
         >
         <span v-if="todos.title==='我的积分'">30</span>
         <img slot="icon" :src="todos.img" width="24" height="24">
        </mt-cell>
{{user}}
    </div>
</template>

<script>
import { Cell } from 'mint-ui';
import {mapState,mapMutations,mapGetters} from 'vuex';
const items = [{
    id:Math.random(),
    img:require('@/assets/p1.png'),
    title:'我的订单'
},{
    id:Math.random(),
    img:require('@/assets/p2.png'),
    title:'我的评论'
},{
    id:Math.random(),
    img:require('@/assets/p3.png'),
    title:'我的消息'
},{
    id:Math.random(),
    img:require('@/assets/p4.png'),
    title:'我的积分'
},{
    id:Math.random(),
    img:require('@/assets/p5.png'),
    title:'我的优惠券'
},{
    id:Math.random(),
    img:require('@/assets/p6.png'),
    title:'我的礼品卡'
},{
    id:Math.random(),
    img:require('@/assets/p7.png'),
    title:'我的地址'
},{
    id:Math.random(),
    img:require('@/assets/p8.png'),
    title:'关于大朴'
},{
    id:Math.random(),
    img:require('@/assets/p9.png'),
    title:'在线客服'
}]
export default {
    components:{
        'mt-cell':Cell
    },
    data(){
        return {
            item:items
          
        }
    },
    created(){
          console.log(this.item)
    },
     computed:{
        ...mapState(['user']),
        ...mapGetters(['tatal'])
    },
    methods:{
        loginMine(){
            console.log('aas')
            this.$router.push('./cart')
        }
    }
}
</script>

<style lang="scss" scoped>
.b-mine{
    height: 100%;
    width: 100%;
}
    .userlog{
    height: 200px;
    background-image: url('../assets/userlog.jpg' );
    background-repeat:no-repeat;
    background-size:100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    img{
       height: 60px;
       width: 60px;
       margin-left:158px;
       margin-top: 15px;
    }
    }
     p{
         color: #ffff;
         height: 10px;
         padding:9px;
         z-index:999;
         text-align: center;
      }
      .b{
          &-list{
              height: 55px;
          
          }
          &-list1{
              width: 100%;
              height: 55px;
              display: flex;
              justify-content: space-around;
              align-items: center;
          }
          &-list2{
              display: flex;
              flex-direction: column;
              text-align: center;
             
              span{
                  padding: 5px;
              }
          }
          &-list3{
                  font-weight: 700;
    font-size: 18px;
    color: #DA5278;
          }
      }
      .hell{
          height: 56px;
      }
      .cell{
          padding:6px;
      }
</style>
